@import "variables";

.models {
  &__favorite {
    &-label {
      color: $neutral-color-800;
      font-family: $font-family-light;
      margin-bottom: 8px;
      font-style: italic;
    }
  }

  &__list {
    display: flex;
    flex-wrap: wrap;
  }

  &__header {
    color: $neutral-color-900;
    font-size: 18px;
    line-height: 24px;
    margin-bottom: 12px;
    width: 100%;
    font-style: $font-family-bold;
  }

  &__separator {
    border-top: 1px $neutral-color-300 solid;
    margin-bottom: 24px;
  }
}




.model {
  position: relative;
  border: 1px $neutral-color-200 solid;
  background: white;
  border-radius: 4px;
  margin-right: 24px;
  margin-bottom: 24px;
  padding: 12px;
  width: 220px;
  cursor: pointer;
  transition: .3s ease all;

  &__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    font-size: 12px;
  }

  &__favorite-icon {
    width: 24px;
    height: 24px;
    color: $neutral-color-200;
    transition: .3s ease all;

    &:hover,
    &--selected {
      color: $primary-color-700;
    }

    &--selected {
      &:hover {
        color: $neutral-color-200;
      }
    }
  }

  &__name {
    color: $neutral-color-900;
    font-family: $font-family-bold;
    text-transform: uppercase;
    overflow: hidden;
    text-overflow: ellipsis;
    width: calc(100% - 28px);
    white-space: nowrap;
  }

  &__versions {
    text-align: center;

    &-count {
      color: $neutral-color-700;
      font-size: 24px;
      font-family: $font-family-bold;
      line-height: 32px;
    }

    &-text {
      font-family: $font-family-light;
      color: $neutral-color-400;
    }
  }

  &:hover {
    border: 1px $neutral-color-400 solid;
  }
}